<!-- H5 播放器 -->

<template>
  <video :id="id" :class="className" :src="value" controls="controls" autoplay="autoplay" loop="loop" muted="muted" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'H5Player',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 状态数据
   */
  data() {
    const { $options: { name }, index } = this
    const hash = CORE.fileName().replace(/[-.]/g, '_')

    return {
      loaded: false,
      player: null,
      id: `${name}_${index}_${hash}`,
      CONFIG: {}, // 配置对象
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 类名
     */
    className() {
      const name = 'CommonVideo-player'
      return `${name} ${name}-${this.$options.name}`
    },

    /**
     * 开始参数
     */
    startParam() {
      return {}
    },

    /**
     * 停止参数
     */
    stopParam() {
      return {}
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听数据值
     */
    value() {
      if (!this.loaded) return
      this.value ? setTimeout(this.start, 300) : this.stop()
    },

    /**
     * 监听是否可见
     */
    visible(visible) {
      visible ? setTimeout(this.show, 300) : this.hide()
    },

    /**
     * 监听加载完成
     */
    loaded() {
      this.value && this.start()
    },
  },

  /**
   * 挂载完成 (先抽取再调用)
   */
  mounted() {
    this.load().catch((e) => CORE.logError('播放器初始化', {}, e))
  },

  /**
   * 销毁之前 (先抽取再调用)
   */
  beforeDestroy() {
    this.distroy()
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 加载
     */
    async load() {
      this.loaded = true
    },

    /**
     * 开始
     */
    start() {
      //
    },

    /**
     * 停止
     */
    stop() {
      //
    },

    /**
     * 显示
     */
    show() {
      //
    },

    /**
     * 隐藏
     */
    hide() {
      //
    },

    /**
     * 销毁
     */
    distroy() {
      //
    },
  },
}
</script>
